﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ProClinic-医院管理系统Bootstrap4前端框架</title>
    <!-- Fav  Icon Link -->
    <link rel="shortcut icon" type="image/png" href="images/fav.png">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- themify icons CSS -->
    <link rel="stylesheet" href="css/themify-icons.css">
    <!-- Animations CSS -->
    <link rel="stylesheet" href="css/animate.css">
    <!-- Main CSS -->
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/green.css" id="style_theme">
    <link rel="stylesheet" href="css/responsive.css">
    <!-- morris charts -->
    <link rel="stylesheet" href="charts/css/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="css/jquery-jvectormap.css">
    <link rel="stylesheet" href="datatable/dataTables.bootstrap4.min.css">

    <script src="js/modernizr.min.js"></script>
</head>

<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<!-- Color Changer -->
<div class="theme-settings" id="switcher">
		<span class="theme-click">
			<span class="ti-settings"></span>
		</span>
    <span class="theme-color theme-default theme-active" data-color="green"></span>
    <span class="theme-color theme-blue" data-color="blue"></span>
    <span class="theme-color theme-red" data-color="red"></span>
    <span class="theme-color theme-violet" data-color="violet"></span>
    <span class="theme-color theme-yellow" data-color="yellow"></span>
</div>
<!-- /Color Changer -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <div class="container top-brand">
            <nav class="navbar navbar-default">
                <div class="navbar-header">
                    <div class="sidebar-header"><a href="index.html"><img src="images/logo-dark.png" class="logo"
                                                                          alt="logo"></a>
                    </div>
                </div>
                <ul class="nav justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link">
                            <span title="Fullscreen" class="ti-fullscreen fullscreen"></span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="modal" data-target=".lochana-modal-lg">
                            <span class="ti-search"></span>
                        </a>
                        <div class="modal fade lochana-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-lorvens">
                                <div class="modal-content lochana-box-shadow2">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Search Patient/医生:</h5>
                                        <span class="ti-close" data-dismiss="modal" aria-label="Close">
												</span>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <input type="text" class="form-control" id="search-term"
                                                       placeholder="Type text here">
                                                <button type="button" class="btn btn-lorvens lochana-bg">
                                                    <span class="ti-location-arrow"></span> Search
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                           aria-haspopup="true"
                           aria-expanded="false">
                            <span class="ti-announcement"></span>
                        </a>
                        <div class="dropdown-menu lochana-box-shadow2 notifications animated flipInY">
                            <h5>Notifications</h5>
                            <a class="dropdown-item" href="#">
                                <span class="ti-wheelchair"></span> New Patient Added</a>
                            <a class="dropdown-item" href="#">
                                <span class="ti-money"></span> Patient payment done</a>
                            <a class="dropdown-item" href="#">
                                <span class="ti-time"></span>Patient Appointment booked</a>
                            <a class="dropdown-item" href="#">
                                <span class="ti-wheelchair"></span> New Patient Added</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                           aria-haspopup="true"
                           aria-expanded="false">
                            <span class="ti-user"></span>
                        </a>
                        <div class="dropdown-menu lochana-box-shadow2 profile animated flipInY">
                            <h5>John Willing</h5>
                            <a class="dropdown-item" href="#">
                                <span class="ti-settings"></span> Settings</a>
                            <a class="dropdown-item" href="#">
                                <span class="ti-help-alt"></span> Help</a>
                            <a class="dropdown-item" href="#">
                                <span class="ti-power-off"></span> Logout</a>
                        </div>
                    </li>
                </ul>

            </nav>
        </div>
        <!-- /Top Navigation -->
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-home"></span> 控制面板</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="index.html">默认</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-wheelchair"></span> 病人管理</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="add-patient.html">添加病人信息</a>
                                <a class="dropdown-item" href="patients.html">查看病人信息</a>
                                <a class="dropdown-item" href="about-patient.html">病人详情</a>
                                <a class="dropdown-item" href="edit-patient.html">编辑病人信息</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown active">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-user"></span> 医生管理</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="add-doctor.html">添加医生信息</a>
                                <a class="dropdown-item" href="doctors.html">查询医生信息</a>
                                <a class="dropdown-item" href="about-doctor.html">医生信息详情</a>
                                <a class="dropdown-item" href="edit-doctor.html">编辑医生信息</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-pencil-alt"></span> 出诊管理</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="add-appointment.html">添加出诊信息</a>
                                <a class="dropdown-item" href="appointments.html">查询出诊信息</a>
                                <a class="dropdown-item" href="about-appointment.html">出诊信息详情</a>
                                <a class="dropdown-item" href="edit-appointment.html">编辑出诊信息</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-money"></span> 支付管理</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="add-payment.html">添加支付</a>
                                <a class="dropdown-item" href="payments.html">所有支付</a>
                                <a class="dropdown-item" href="about-payment.html">发票</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-key"></span> 病房分配</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="add-room.html">添加病房</a>
                                <a class="dropdown-item" href="rooms.html">查询病房</a>
                                <a class="dropdown-item" href="edit-room.html">编辑病房信息</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-layout-tab"></span> UI框架</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="typography.html">排版</a>
                                <a class="dropdown-item" href="buttons.html">按钮</a>
                                <a class="dropdown-item" href="cards.html">卡片</a>
                                <a class="dropdown-item" href="tabs.html">选项卡</a>
                                <a class="dropdown-item" href="accordions.html">手风琴</a>
                                <a class="dropdown-item" href="modals.html">模态窗口</a>
                                <a class="dropdown-item" href="lists.html">媒体和列表</a>
                                <a class="dropdown-item" href="grid.html">网格</a>
                                <a class="dropdown-item" href="progress-bars.html">进度条</a>
                                <a class="dropdown-item" href="notifications-alerts.html">预警和提示</a>
                                <a class="dropdown-item" href="pagination.html">分页</a>
                                <a class="dropdown-item" href="carousel.html">滑块</a>
                                <a class="dropdown-item" href="tables.html">表格</a>
                                <a class="dropdown-item" href="charts-1.html">Morris图表</a>
                                <a class="dropdown-item" href="charts-2.html">Flot图表</a>
                                <a class="dropdown-item" href="map-1.html">谷歌地图</a>
                                <a class="dropdown-item" href="map-2.html">Vector地图</a>
                                <a class="dropdown-item" href="forms.html">表单</a>
                                <a class="dropdown-item" href="font-awesome.html">Font Awesome </a>
                                <a class="dropdown-item" href="themify.html">Themify图标</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                               aria-haspopup="true"
                               aria-expanded="false"><span class="ti-file"></span> 其它页面</a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="login.html">登录</a>
                                <a class="dropdown-item" href="sign-up.html">注册</a>
                                <a class="dropdown-item" href="404.html">404</a>
                                <a class="dropdown-item" href="blank-page.html">空白页</a>
                                <a class="dropdown-item" href="pricing.html">价格表</a>
                                <a class="dropdown-item" href="faq.html">FAQ</a>
                                <a class="dropdown-item" href="invoice.html">发票</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">添加医生</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="index.html">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item">医生</li>
                        <li class="breadcrumb-item active">添加医生</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container">

            <div class="row">
                <!-- Widget Item -->
                <div class="col-md-12">
                    <div class="widget-area-2 lochana-box-shadow">
                        <h3 class="widget-title">添加医生</h3>
                        <form id="add-From" action="/doctor/add" method="post" enctype="multipart/form-data">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="doctorName">医生姓名</label>
                                    <input type="text" class="form-control" placeholder="医生姓名" id="doctorName"
                                           name="doctorName">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="dept-id">科室</label>
                                    <select class="form-control" id="dept-id" name="deptId">
                                        <option value="1">内科</option>
                                        <option value="2">骨科</option>
                                        <option value="3">牙科</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="phone">手机号</label>
                                    <input type="text" placeholder="手机号" class="form-control" id="phone" name="phone">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="gender">性别</label>
                                    <select class="form-control" id="gender" name="gender">
                                        <option>男</option>
                                        <option>女</option>
                                        <option>保密</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="file">个人照片</label>
                                    <input type="file" name="file" value="" class="form-control" id="file">
                                    <img src="#" id="pimages" style="width: 200px;height: 200px;"/>
                                    <input id="imageFileName" class="btn" name="imageFileName" required="" type="hidden"
                                           value="">
                                </div>
                                <div class="form-group col-md-6 mb-3">
                                    <button type="submit" class="btn btn-primary btn-lg">提交</button>
                                </div>
                            </div>
                        </form>
                        <!-- Alerts-->
                        <!--<div class="alert alert-success alert-dismissible fade show" role="alert">
                            <strong>Successfully Done!</strong> Please Check in doctors list
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>-->
                        <!-- /Alerts-->
                    </div>
                </div>
                <!-- /Widget Item -->
            </div>
        </div>
        <!-- /Main Content -->
        <!--Copy Rights-->
        <!--<div class="container">
            <div class="d-sm-flex justify-content-center">
                <span class="text-muted text-center d-block d-sm-inline-block">Copyright © 2020. All rights reserved.</span>
            </div>
        </div>-->
        <!-- /Copy Rights-->
    </div>
    <!-- /Page Content -->
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<!-- Jquery Library-->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Popper Library-->
<script src="js/popper.min.js"></script>
<!-- Bootstrap Library-->
<script src="js/bootstrap.min.js"></script>

<!-- Datatable  -->
<script src="datatable/jquery.dataTables.min.js"></script>
<script src="datatable/dataTables.bootstrap4.min.js"></script>

<!-- Custom Script-->
<script src="js/custom.js"></script>

<script src="js/jquery-form.js"></script>

<script>
    $(function () {
        $("#add-From").submit(function () {
            //使用异步请求
            $(this).ajaxSubmit(function (result) {
                location.href = "./doctors.html"
            });
            //限制默认的同步请求
            return false;
        });
    });
</script>
<script>

    let filename = null;
    //头像预览
    $("input[name='file']").change(function () {
        //获取上传文件
        let imageFile = this.files[0];
        filename = this.files[0]
        if (imageFile != null) {
            //创建读取流
            let fileReader = new FileReader();
            //读取文件
            fileReader.readAsDataURL(imageFile);
            //利用读取事件的加载事件
            fileReader.onload = function () {
                $("#pimages").prop("src", this.result);
            };
        }
    });
</script>
</body>

</html>